<template>
  <div>
      <ul>
        <li v-for="(item,index) in list" :key="index" class="li1">
          <img :src="`http://47.115.85.237:3000/${item.product_picture}`" alt="">
       
          
        
           <p>{{item.product_title}}</p>
          <p style=" color:#888; "  >{{item.product_name}}</p>
         <p>
           <span style=" color:coral; margin-right:10px;">￥{{item.product_price}}</span> 
            <span style=" color:#888; text-decoration:line-through; ">￥{{item.product_selling_price}}元</span>
          </p>  
        </li>
      </ul>

  </div>
</template>

<script>

export default {
  name:"",
// 组件注册
  components: {},
// 父组件传参
  props: {},
// 变量声明  
  data() {
    return {
      list:[]
    };
  },
// Vue实例创建完成以后执行 数据可用 
async created() {
  
     let res = await this.$axios.post('api/product/getHotProduct',{"categoryName":["电视机","空调","洗衣机","保护套", "保护膜", "充电器", "充电宝"]})
    
     let { Product } = res.data
      console.log(Product)
      this.list = Product
  },
// Vue模板挂载完毕以后执行  DOM节点加载完毕了（可以获取节点了） 
  mounted() {},
// keepalive 缓存进入执行 
  activited() {},
// vue组件更新完毕以后执行 
  update() {},
// 定义事件 
  methods: {

  },
// 过滤器 
  filter: {},
// 计算属性 
  computed: {

  },
// 监听属性 
  watch: {},
};
</script>

<style scoped>
ul{ 
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
 
}
img{
  width: 100%;
}
.li1{
  width: 300px;
  height: 450px;
  margin:20px;
  padding:10px;
}
.li1:hover{
  
  width: 300px;
  height: 450px;
  margin:20px;
  box-shadow: 2px 10px 20px 5px #888888;


}
p{
  text-align: center;
}
</style>
